<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

</div>
<body th:fragment="content">
<!--在这里写你的内容-->
<!-- OVERVIEW -->
<div id="overview" class="panel panel-headline">
    <div class="panel-heading">
        <h3 class="panel-title">交易报表</h3>
        <p class="panel-subtitle"  style="display: inline">Period: Oct 14, 2016 - Oct 21, 2016</p>
        <div style="float: right"><a href="#currentTransaction" class="btn btn-primary">查看最近交易</a></div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <div class="metric">
                    <span class="icon"><i class="fa fa-download"></i></span>
                    <p>
                        <span class="number">1,252</span>
                        <span class="title">下载量</span>
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric">
                    <span class="icon"><i class="fa fa-shopping-bag"></i></span>
                    <p>
                        <span class="number">203</span>
                        <span class="title">销售量</span>
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric">
                    <span class="icon"><i class="fa fa-eye"></i></span>
                    <p>
                        <span class="number">274,678</span>
                        <span class="title">访问量</span>
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="metric">
                    <span class="icon"><i class="fa fa-bar-chart"></i></span>
                    <p>
                        <span class="number">35%</span>
                        <span class="title">Conversions</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div id="headline-chart" class="ct-chart"></div>
            </div>
            <div class="col-md-3">
                <div class="weekly-summary text-right">
                    <span class="number">2,315</span> <span class="percentage"><i class="fa fa-caret-up text-success"></i> 12%</span>
                    <span class="info-label">总销售</span>
                </div>
                <div class="weekly-summary text-right">
                    <span class="number">￥5,758</span> <span class="percentage"><i class="fa fa-caret-up text-success"></i> 23%</span>
                    <span class="info-label">月收入</span>
                </div>
                <div class="weekly-summary text-right">
                    <span class="number">￥65,938</span> <span class="percentage"><i class="fa fa-caret-down text-danger"></i> 8%</span>
                    <span class="info-label">总收入</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OVERVIEW -->
<!-- RECENT PURCHASES -->
<div id="currentTransaction" class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">最近交易</h3>
        <div class="right">
            <div class="col-md-6 text-right"><a href="#overview" class="btn btn-primary">查看整体报表</a></div>
        </div>
    </div>
    <div class="panel-body no-padding">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>订单编号</th>
                <th>用户名</th>
                <th>金额</th>
                <th>时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><a href="#">763648</a></td>
                <td>Steve</td>
                <td>￥122</td>
                <td>Oct 21, 2016</td>
                <td><span class="label label-success">完成</span></td>
            </tr>
            <tr>
                <td><a href="#">763649</a></td>
                <td>Amber</td>
                <td>￥62</td>
                <td>Oct 21, 2016</td>
                <td><span class="label label-warning">等待支付</span></td>
            </tr>
            <tr>
                <td><a href="#">763650</a></td>
                <td>Michael</td>
                <td>￥34</td>
                <td>Oct 18, 2016</td>
                <td><span class="label label-danger">失败</span></td>
            </tr>
            <tr>
                <td><a href="#">763651</a></td>
                <td>Roger</td>
                <td>￥186</td>
                <td>Oct 17, 2016</td>
                <td><span class="label label-success">完成</span></td>
            </tr>
            <tr>
                <td><a href="#">763652</a></td>
                <td>Smith</td>
                <td>￥362</td>
                <td>Oct 16, 2016</td>
                <td><span class="label label-success">完成</span></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> 过去24小时</span></div>

        </div>
    </div>
</div>
<!-- END RECENT PURCHASES -->

<!-- END FILTER COLUMN -->
</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">
    <script>
        $(function() {
            var data, options;

            /**
             * 整体报表的折线图设置
             */
            // headline charts
            data = {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                series: [
                    [23, 29, 24, 40, 25, 24, 35],
                    [14, 25, 18, 34, 29, 38, 44],
                ]
            };
            options = {
                height: 300,
                showArea: true,
                showLine: false,
                showPoint: false,
                fullWidth: true,
                axisX: {
                    showGrid: false
                },
                lineSmooth: false,
            };

            new Chartist.Line('#headline-chart', data, options);

        })


    </script>

</div>

</html>